<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账号管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
    <link th:href="@{/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
    <script th:src="@{/plugins/jquery/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body layui-form layui-form-pane" >
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">账号</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="account" id="account" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="name"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" id="phone" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button id="userBtnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                            <button id="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
                <table id="tab" lay-filter="tab"></table>
            </div>
        </div>
    </div>

    <html th:include="website/footer"></html>

    <!-- 表单弹窗 -->
    <script type="text/html" id="userForm">
        <form class="layui-form" lay-filter="userForm" style="padding-top: 25px;">

            <input type="hidden" name="id" />

            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入姓名" lay-verify="name"
                           maxlength="12" class="layui-input" style="width:350px;">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">账号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="account" placeholder="请输入账号" lay-verify="name"
                           maxlength="32" class="layui-input" style="width:350px;">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" placeholder="请输入密码" lay-verify="password" class="layui-input" style="width:350px;">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked/>
                    <input type="radio" name="sex" value="女" title="女"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" placeholder="请输入手机号" lay-verify="phone|required" class="layui-input" style="width:350px;">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="addUserFrom">保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" id="btnClose">取消</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 工具条 -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addUser">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="batchDelUser">批量删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <script type="text/html" id="tabState">
        <input type="checkbox" lay-filter="updateState" lay-skin="switch" lay-text="正常|锁定"
        value="{{d.id}}" {{d.status==0?'checked':''}}/>
    </script>

    <!-- 用户所属角色表单 -->
    <script type="text/html" id="roleTreeForm">
        <form class="layui-form" lay-filter="roleTreeForm" style="padding-top: 25px;">
            <div class="layui-form-item">
                <label class="layui-form-label">分配权限：</label>
                <div class="layui-input-inline">
                    <div id="userRoleTree" class="ztree"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="addUserFrom">保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" id="btnRoleTreeClose">取消</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 表格操作列 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setRole">分配角色</a>
    </script>

    <script th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/main.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/user/user.js}" type="text/javascript" charset="utf-8"></script>

</body>
</html>